<script setup >
import getStatusHeight from '/utils/getStatusHeight.js';
const {statusBarHeight,topBarHeight } = getStatusHeight()
import { useCommonStore } from '/stores/common'
const common = useCommonStore()
import { ref,computed } from 'vue'
let ff = computed(() =>{
  return (T.value/common.sp.length*100).toFixed(2)
})
let F = ref(0)
let T = ref(0)
common.sp.forEach(x=>{
  if (x == 1){
    T.value = T.value + 1
  }else {
    F.value = F.value + 1
  }
})
function goBack(){
  uni.reLaunch({
    url: '/pages/index/index'
  });
}
</script>
<template>
  <view style="background-blend-mode: overlay;;background: linear-gradient(to right, #fff, #a8fabb, #bcf8e3), linear-gradient(to bottom, #b1f4be 50% , #f6f6f6 90%);height: 560rpx">
  <view :style="{'padding-top': statusBarHeight+'px',height: +topBarHeight+'px'}" style="display: flex;align-items: center;justify-content: flex-start;gap: 200rpx;padding-left: 30rpx">
    <van-icon @click="goBack" name="arrow-left" size="50rpx" /><view style="font-size: 38rpx;font-weight: bold">练习报告</view>
  </view>
    <view  style="height: 400rpx;width: 700rpx;background-color: white;margin: 0 auto;margin-top: 20rpx;border-radius: 20rpx;box-shadow: 0 0 10rpx rgba(0,0,0,0.1);display: flex;align-items: center;justify-content: center;gap: 10rpx">
        <view v-if="!common.fig" style="width: 300rpx;height: 300rpx;border: 10rpx solid #0AD192;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view v-if="common.sp.length !== 0" style="display: flex;align-items: center;color: #0AD192;font-weight: bold;font-size: 60rpx ">{{ff}}<view style="font-size: medium">%</view></view>
          <view  v-else style="display: flex;align-items: center;color: #0AD192;font-weight: bold;font-size: 60rpx ">{{common.score === 0 ? 0 : common.score.slice(1,3)}}<view style="font-size: medium"></view></view>
          <view v-if="common.sp.length !== 0"  style="font-size: 24rpx;color: #9c9c9c">正确率</view>
          <view v-else  style="font-size: 24rpx;color: #9c9c9c">得分</view>
        </view>
      <view v-if="common.fig" style="width: 200rpx;height: 200rpx;border: 10rpx solid #0AD192;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view style="display: flex;align-items: center;color: #0AD192;font-weight: bold;font-size: 60rpx ">{{common.zw}}<view style="font-size: medium"></view></view>
          <view style="font-size: 24rpx;color: #9c9c9c">写作</view>
        </view>
      <view v-if="common.fig" style="width: 200rpx;height: 200rpx;border: 10rpx solid #0AD192;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view style="display: flex;align-items: center;color: #0AD192;font-weight: bold;font-size: 60rpx ">{{common.score.toFixed(1)}}<view style="font-size: medium"></view></view>
          <view style="font-size: 24rpx;color: #9c9c9c">选择题</view>
        </view>
      <view v-if="common.fig" style="width: 200rpx;height: 200rpx;border: 10rpx solid #0AD192;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view  style="display: flex;align-items: center;color: #0AD192;font-weight: bold;font-size: 60rpx ">{{common.fy}}<view style="font-size: medium"></view></view>
          <view style="font-size: 24rpx;color: #9c9c9c">翻译</view>
        </view>
    </view>
  </view>
  <scroll-view scroll-y style="background-color: #f6f6f6;height: 732rpx;padding-top: 20rpx;" v-if="common.sp.length !== 0">
    <view style="width: 620rpx;height: 300rpx;background-color: #ffffff;margin: 0 auto;border-radius: 20rpx;box-shadow: 0 0 10rpx rgba(0,0,0,0.1);padding: 40rpx">
      <view style="font-weight: bold;text-align: left">考试情况</view>
      <view style="background-color: #f9f9f9;width: 600rpx;height: 200rpx;margin: 0 auto;margin-top: 40rpx;display: flex;align-items: center;padding:0 12rpx;justify-content: space-evenly">
        <view style="height: 100rpx;width: 100rpx;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view style="font-size: 44rpx">{{common.sp.length}}</view>
          <view style="font-size: 24rpx;color: #9c9c9c">本次做题</view>
        </view>
        <view style="height: 100rpx;width: 100rpx;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view style="font-size: 44rpx;color: #4cd964 ">{{T}}</view>
          <view style="font-size: 24rpx;color: #9c9c9c">正确</view>
        </view>
        <view style="height: 100rpx;width: 100rpx;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view style="font-size: 44rpx;color: red">{{F}}</view>
          <view style="font-size: 24rpx;color: #9c9c9c">错误</view>
        </view>
        <view style="height: 100rpx;width: 100rpx;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <view  style="font-size: 44rpx">{{common.time}}</view>
          <view style="font-size: 24rpx;color: #9c9c9c">用时</view>
        </view>

      </view>
    </view>
    <view style="width: 620rpx;background-color: #ffffff;margin: 0 auto;border-radius: 20rpx;box-shadow: 0 0 10rpx rgba(0,0,0,0.1);padding: 40rpx;margin-top: 30rpx">
      <view style="font-weight: bold;text-align: left">答题卡</view>
      <view style="background-color: #ffffff;width: 600rpx;margin: 0 auto;margin-top: 40rpx;display: flex;align-items: center;padding:20rpx;flex-wrap: wrap;gap: 40rpx">
       <template v-for="(x,i) in common.sp">
        <view v-if="x === '1'" style="height: 80rpx;width: 80rpx;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: #4cd964">
          <view style="font-size: 32rpx;color: white">{{i+1}}</view>
        </view>
         <view v-else style="height: 80rpx;width: 80rpx;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: #f69785">
           <view style="font-size: 32rpx;color: white">{{i+1}}</view>
         </view>
       </template>
      </view>
    </view>
  </scroll-view>

</template>




<style scoped lang="scss">

</style>
